Day15 AC 英雄頁面#2

簡單小語

雖然都是簡易排版及臨時起意的想法，可能實務上用到機會不大，加入了好久沒使用的輪播效果，認為目前尺寸的控制還需加強，常會在尺寸編排上混亂而不知道現在會變大變小，下方內容的編排概念就是橫排交錯，另外用了hover做了很多觸摸效果，類似人員介紹卡片的互動效果，透過AC課程一個簡易的作業進而讓我做了更多的練習，也是好處一樁，持續的刻意練習，一天一練習，觀念更釐清。

筆記分享

1. 輪播套件Swiper的掌握，CSS及JavaScript都需要套用CDN才能正常使用。
2. 一個頁面只有一個h1，因此勤加練習用文字取代圖片方式。
3. 使用overflow: hidden達到圖片放大卻不會溢出的效果。
4. 使用transform: translateY()達到觸摸後物件移動效果。
5. 使用transform: scale()達成觸摸後曠散的效果。
6. 內容排版刻意沒有對稱式，讓自己多加掌握排版的位置及方向。
7. 顏色的置換真的沒有設計感，看來只剩前端工程師一條路哈哈。
8. RWD就是要消除排版間的空隙重新分配，因手機螢幕小所以內容要過濾，排版要熟慮。
9. RWD排版的文字內容會撐開，因此過濾掉一些內容框架不會被撐開，RWD需顧及手機使用者對於內容複雜度的影響。
10. padding及margin的掌握需勤加熟悉，才能切出完美又符合需求的樣式。

刻意練習

Practice(200805 Day 15)

前次練習

Practice(200804 Day 14)

2020 iT邦幫忙鐵人賽 Day15 網頁前端-刻意練習(英雄頁面#2)